<template>
	<span 
		class="views" 
		@click.stop="handleFavor"
		:class="{ 'active': props.favor_status }">
		<up-icon
			v-if="!props.favor_status"
			name="star" 
			size="24"></up-icon>
		<up-icon
			v-else
			color="#ffb853"
			name="star-fill" 
			size="24"></up-icon>
		{{props.favor}}
	</span>
</template>

<script lang="ts" setup name="">
	import { defineProps,defineEmits } from 'vue'

	const props = defineProps({  
		favor: Number,  
		favor_status: Boolean  
	});  
	const emit = defineEmits(['update:favor_status'])
	
	function handleFavor() {  
	  emit('update:favor_status', !props.favor_status)  
	} 
</script>

<style scoped lang="scss">
	.views{
		display: flex;
		align-items: center;
	}
</style>